<template>
    <div id="plugin-market" class="flex-container">
      <!-- 头部 -->
      <el-header class="header">
        <h1>插件市场</h1>
        <!-- 用户登录状态判断 -->
        <div v-if="userLoggedIn" class="user-info" @click="logout">
          <span class="username">{{ userName }}</span>
          <el-avatar :src="userAvatar" size="large" />
        </div>
        <!-- <el-button v-else @click="showLoginModal" class="login-button">登录</el-button> -->
      </el-header>
  
      <!-- 主体内容 -->
      <el-main class="main-content-container">
        <!-- 检索名称 -->
        <div class="search-container">
          <el-input v-model="searchName" placeholder="请输入插件名称" class="search-input" />
          <el-button icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
  
        <!-- 插件列表 -->
        <el-row class="plugin-row" :gutter="20">
          <el-col :span="4" v-for="(plugin, index) in plugins" :key="index">
            <el-card class="plugin-card">
              <img :src="plugin.pic" :alt="plugin.name" />
              <h2>{{ plugin.name }}</h2>
              <p class="description" :title="plugin.desc">
                {{ truncateDescription(plugin.desc) }}
              </p>
              <el-button @click="downloadPlugin(plugin)" plain>下载</el-button>
            </el-card>
          </el-col>
        </el-row>
  
        <!-- 无内容提示 -->
        <div v-if="plugins.length === 0" class="no-content">
          <p>暂无相关内容。</p>
        </div>
  
        <!-- 分页 -->
        <el-pagination
          v-if="plugins.length > 0"
          class="pagination"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handlePageChange"
        />
      </el-main>
  
      <!-- 登录弹窗 -->
      <el-dialog :visible.sync="showLogin" title="登录">
        <el-form :model="loginForm" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" />
          </el-form-item>
        </el-form>
        <el-button @click="login" type="primary">登录</el-button>
      </el-dialog>
  
      <!-- 确认登出的弹窗 -->
      <el-dialog :visible.sync="confirmLogoutDialog" title="确认登出">
        <p>确定要登出吗？</p>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelLogout">取消</el-button>
          <el-button type="primary" @click="confirmLogout">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {getMarketPluginsList} from '@/api/ai/plugins'
  export default {
    data() {
      return {
        userLoggedIn: false,
        userName: "John Doe",
        userAvatar: "https://example.com/avatar.jpg",
        showLogin: false,
        confirmLogoutDialog: false,
        loginForm: {
          username: "",
          password: "",
        },
        searchName: "", // 检索名称
        currentPage: 1, // 当前页码
        pageSize: 12, // 每页显示数量
        total: 0, //总数量
        plugins: [],
      };
    },
    computed: {
      
    },
    created(){
      this.getList()
    },
    methods: {
      getList(){
        getMarketPluginsList({
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          name:this.searchName
        }).then(res=>{
          this.plugins = res.rows
          this.total = res.total
        })
      },
      showLoginModal() {
        this.showLogin = true;
      },
      login() {
        this.userLoggedIn = true;
        this.showLogin = false;
      },
      logout() {
        this.confirmLogoutDialog = true;
      },
      confirmLogout() {
        this.userLoggedIn = false;
        this.confirmLogoutDialog = false;
      },
      cancelLogout() {
        this.confirmLogoutDialog = false;
      },
      downloadPlugin(plugin) {
        // if (this.userLoggedIn) {
        if(!plugin.code){
          console.log('资源不存在')
        }else{
          console.log(`下载 ${plugin.name}`);
          this.$download.saveAs(plugin.code)
        }
          
          
        // } else {
        //   this.showLoginModal();
        // }
      },
      truncateDescription(description) {
        const maxLines = 2;
        const lines = description.split('\n');
        if (lines.length > maxLines) {
          return lines.slice(0, maxLines).join('\n') + '...';
        }
        return description;
      },
      handleSearch() {
        // 重新设置当前页为第一页
        this.currentPage = 1;
        this.getList()
      },
      handlePageChange(newPage) {
        this.currentPage = newPage;
        this.getList()
      },
    },
  };
  </script>
  
  <style scoped>
    #plugin-market {
      font-family: 'Arial', sans-serif;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .flex-container {
      flex: 1;
    }
    
    .header {
      background-color: #409EFF;
      color: #fff;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .header h1 {
      margin: 0;
    }
    
    .user-info {
      margin-left: auto;
      display: flex;
      align-items: center;
    }
    
    .user-info .username {
      margin-right: 10px;
      color: #fff;
      font-size: 16px;
      line-height: 1;
    }
    
    .user-info el-avatar {
      margin-top: -6px;
    }
    
    .login-button {
      margin-left: auto;
    }
    
    .main-content-container {
      margin: 10px;
      flex: 1;
    }
    
    .search-container {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
    }
    
    .search-input {
      width: 400px;
      margin-right: 10px;
    }
    
    .plugin-row {
      justify-content: center;
    }
    
    .plugin-card {
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 20px;
    }
    
    .plugin-card img {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }
    
    .plugin-card h2 {
      margin: 15px 0 10px;
      font-size: 18px;
    }
    
    .description {
      margin-bottom: 15px;
      color: #555;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    
    .pagination {
      margin-top: 10px;
      text-align: center;
    }
    .no-content {
        text-align: center;
        padding: 20px;
        color: #999;
    }
    </style>
  